<template>
	<!-- :style="'background-image: url('+$timer.ensureUrl(myCompany.vip_desc)+')'" -->
	<view class="box-vip">

		<image :src="$timer.ensureUrl(myCompany.vip_desc)" style="width: 100%;" mode="widthFix"></image>

		<!-- 自定义导航栏 -->
		<u-navbar @leftClick='leftClick' title="平台会员" :titleStyle='titleStyle' leftIconColor='#FFFFFF'
			bgColor='transparent'>
		</u-navbar>
		<!-- end -->

		<!-- <view style="height: 100rpx;"></view> -->

		<!-- logo -->
		<!-- <view class="ml-10 mr-10">
			<image class="w-100p" src="https://yjgs.jsonbug.com/storage/default/20241220/vip_top.png" mode="widthFix">
			</image>
		</view> -->
		<!-- end -->

		<!-- 会员权益 -->
		<!-- <view class="ml-10 mr-10 mt-30">
			<image src="https://yjgs.jsonbug.com/storage/default/20241224/vip.png" mode="widthFix" class="w-100p">
			</image>
		</view> -->
		<!-- end -->

		<!-- 提交按钮 -->
		<view v-if="is_card != 1" class="submitVipBut">
			<view class="mlr wfc ">
				<text @click="readClick" v-if="!is_read" class="iconfont-yjgs" style="color: #fff;">&#xe64d;</text>
				<text @click="readClick" v-if="is_read" style="color: #fff;" class="iconfont-yjgs">&#xe61c;</text>
				<text @click="readClick" style="color: #fff;" class="fw ml-10">阅读并同意</text>
				<text @click="openAgree" style="color: #fff;" class="fw ">《遇见贵商会员服务协议》</text>
			</view>
			<view @click="submit" class="mr-40 ml-40 mt-10 box-submt ">
				<image src="https://yjgs.jsonbug.com/test/btn_365_1.png" mode="widthFix" class="w-100p"></image>
			</view>
		</view>
		<!-- end -->

		<!-- 已开通vip -->
		<view v-if="is_card == 1" class="submitVipBut">
			<view class="mlr wfc ">
				<text style="color: #fff;" class="fw">会员到期时间 {{$timer.formatTime(vip_time)}}</text>
			</view>
			<view class="mr-40 ml-40 mt-10">
				<image src="https://yjgs.jsonbug.com/test/btn_no365_1.png" mode="widthFix" class="w-100p"></image>
			</view>
		</view>
		<!-- end -->

		<!-- 免费名片 -->
		<view v-if="is_show_card" @click="toCardPage" class="mpMPImg">
			<image src="https://yjgs.jsonbug.com/test/mpmp.png" mode="widthFix" style="width: 250rpx;"></image>
		</view>
		<!-- end -->


		<!-- 会员协议弹窗 -->
		<u-popup round='8' closeable :show="show" mode="center" @close="show=false">
			<view class="box-vip-xieyi">
				<view class="fw wfc mlr fs-32">会员服务协议</view>
				<scroll-view scroll-y style="height: 56vh;" class="mt-10">
					<view class="mt-20">
						<jyf-parser :html="agreement" ref="article" :tag-style="tagStyle"></jyf-parser>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- end -->


		<!-- 支付弹窗 -->
		<payment :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun"
			:order_id="pay_order_id" :totalPrice="totalPrice"></payment>
		<!-- end -->


	</view>
</template>

<script>
	import {
		cardWechatPay,
		cardUserGetCardStatus,
		serviceInfo,
	} from '@/api/extend.js'
	import payment from '@/pages/extend/components/payment';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getAgreementApi
	} from '@/api/user.js';
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
			"jyf-parser": parser,
			payment,
		},
		data() {
			return {
				is_show_card: false,
				vip_time: '',
				is_card: -1,
				totalPrice: '365',
				pay_order_id: '888',
				pay_close: false,
				payMode: [{
						name: '微信支付',
						icon: 'icon-weixinzhifu',
						// #ifdef H5
						value: this.$wechat.isWeixin() ? 'weixin' : 'h5',
						// #endif
						// #ifdef MP
						value: 'routine',
						// #endif
						// #ifdef APP-PLUS
						value: 'weixin',
						// #endif
						title: '微信快捷支付',
						payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
						name: '支付宝支付',
						icon: 'icon-zhifubao',
						// #ifdef H5 || APP-PLUS
						value: 'alipay',
						// #endif
						// #ifdef MP
						value: 'alipayQr',
						// #endif
						title: '支付宝支付',
						payStatus: true
					}
					// #endif
				],
				agreement: '',
				show: false,
				is_read: false, //是否阅读协议
				titleStyle: {
					color: '#D1D1D8',
					fontWeight: 'bold'
				},
				tagStyle: {
					img: 'width:100%;display:block;'
				},
			}
		},
		/**
		 * 用户点击右上角分享
		 * 
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: '加入遇见贵商，一起互助互帮',
				imageUrl: "https://yjgs.jsonbug.com/storage/default/20241220/share.png",
				path: '/pages/extend/user_vip/user_vip?uid=' + (that.uid || -1)
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: '加入遇见贵商，一起互助互帮',
				query: {},
				imageUrl: 'https://yjgs.jsonbug.com/storage/default/20241220/share.png'
			};
		},
		computed: {
			uid() {
				return this.$store.state.app.uid
			},
			isLogin() {
				return !!this.$store.state.app.token
			},
			user() {
				return this.$store.state.app.userInfo
			},
			myCompany() {
				return this.$store.state.extend.myCompany;
			}
		},
		// #endif
		created() {

			this.verifyCard();

			if (this.isLogin) {
				this.verifyCardIsExpire();
			}
		},
		onLoad() {
			uni.$on('loginTrigger', () => { // 登录后操作
				this.verifyCardIsExpire();
			})
			uni.$on('cardDetail', () => { // 登录后操作
				this.verifyCard();
			})

			if (!this.myCompany.vip_desc) {
				this.serviceInfoFun();
			}

		},
		methods: {

			verifyCard() {
				let myCard = uni.getStorageSync('userCardInfo');
				if (myCard && myCard.id > 0) {
					this.is_show_card = false
				} else {
					this.is_show_card = true;
				}
			},

			toCardPage() {
				if (!this.isLogin) {
					toLogin();
					return;
				}
				uni.navigateTo({
					url: '/pages/extend/connection/create'
				})
			},

			serviceInfoFun() {
				serviceInfo().then(res => {
					this.$store.commit("SET_MyCompany", res.data);
				})
			},
			/**
			 * 判断一下会员是否过期
			 */
			verifyCardIsExpire() {
				let _this = this;
				let data = uni.getStorageSync('cardExpireTime');
				if (data) {
					if (data.is_card == 1) { // 判断一下是否过期了
						let cruurenTime = this.$timer.formatTime(Date.now(), 'yyyy-mm-dd hh:MM:ss');
						let isExpired = this.$timer.isMembershipExpired(cruurenTime, data.card_endtime);
						if (isExpired) {
							_this.cardStatusFunc();
							return;
						}
						_this.vip_time = data.card_endtime;
						_this.is_card = data.is_card;
					} else {
						_this.cardStatusFunc();
					}
				} else {
					_this.cardStatusFunc();
				}
			},
			cardStatusFunc() {
				cardUserGetCardStatus().then(res => {
					if (res.status == 200 && res.data) {
						uni.setStorageSync('cardExpireTime', res.data);
						this.is_card = res.data.is_card;
						this.vip_time = res.data.card_endtime;
					}
				})
			},
			onChangeFun: function(e) {
				// #ifdef MP
				uni.showLoading({
					title: '正在加载…'
				});

				let admin_id = 0;
				try {
					let pages = getCurrentPages();
					// 判断是否从商会过来
					let dataItem = pages.find(item => item.route == 'pages/extend/chamber/chamber_home');
					if (!this.$timer.isEmpty(dataItem)) {
						admin_id = dataItem['__data__']['chamber_id'] || dataItem?.options?.cid
					}
				} catch (e) {

				}

				cardWechatPay({
					pay_type: e.value,
					admin_id: admin_id || 0
				}).then(res => {
					let _this = this;
					if (res.status == 200) {
						let jsConfig = res.data.result.config;
						jsConfig.timeStamp = jsConfig.timestamp;
						let mp_pay_name = '';
						if (uni.requestOrderPayment) {
							mp_pay_name = 'requestOrderPayment'
						} else {
							mp_pay_name = 'requestPayment'
						}
						uni[mp_pay_name]({
							...jsConfig,
							success: function(res) {
								_this.verifyCardIsExpire()
								uni.hideLoading();
								_this.pay_close = false;
								uni.showToast({
									title: '恭喜你成功开通遇见贵商会员！',
									icon: 'none',
									duration: 4000
								});
								uni.$emit('vip_open')
							},
							fail: function(e) {
								uni.hideLoading();
								_this.pay_close = false;
								return _this.$util.Tips({
									title: '取消支付'
								});
							},
						})
					} else {
						uni.showToast({
							title: res.message || '支付失败',
							icon: 'none'
						})
					}
				}).catch(err => {
					this.pay_close = false;
					uni.hideLoading();
					uni.showModal({
						content: "支付失败",
						showCancel: false,
						success: function(res) {}
					})
				})
				// #endif
			},
			leftClick() {
				uni.navigateBack({
					fail: () => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
			},
			openAgree() {

				if (this.agreement) {
					this.show = true;
					return;
				}

				uni.showLoading({
					title: '加载中'
				});
				getAgreementApi('sys_svip').then(res => {
					this.agreement = res.data.sys_svip
					uni.hideLoading();
					this.show = true;
				})
			},
			submit() {
				if (!this.isLogin) {
					toLogin();
					return;
				}

				if (!this.is_read) {
					uni.showToast({
						title: '请先勾选阅读并同意会员协议',
						icon: 'none',
						duration: 4000
					})
					return
				}

				this.pay_close = true;
			},
			readClick() {
				this.is_read = !this.is_read;
			}
		}
	}
</script>

<style scoped lang="scss">
	.mpMPImg {
		position: fixed;
		right: 0rpx;
		bottom: 300rpx;
	}

	.submitVipBut {
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		left: 0;
	}

	.box-submt {
		padding: 0rpx;
	}

	.box-vip-xieyi {
		padding: 20rpx;
		width: 90vw;
		height: 60vh;
	}

	.box-submt:active {
		opacity: .5;
	}

	.box-vip {
		width: 100%;
		height: 100%;
	}
</style>